<template>
	<view class="page-body">
		<cu-custom bgColor="bg-white" :isBack="true" :isTitle="false">
			<block slot="backText" class="titilestyle">{{title}}</block>

		</cu-custom>
		<view class="wallet-record">
			<view class="record-list">
				<mescroll-uni :fixed="false" :down="downOption" @down="downCallback" :up="upOption" @up="upCallback" height="95%"
					@init="mescrollInit">
					<view class="record-item" v-for="(item,index) in recordList" :key="index" @click="jumpTo('./orderInfo?order_id='+item.order_id)">
						<view class="record-item-left">
							<view class="des"><text class="t-desc">{{item.goods_name}}</text></view>
							<view class="time"><text class="t-time">{{item.created_at}}</text></view>
						</view>
						<view class="record-item-right">
							<text class="text-bold t-record">-{{item.online_amount}}</text>
						</view>
					</view>
					
					<view class="foot">

					</view>
				</mescroll-uni>
			</view>
		</view>
	</view>


</template>

<script>
	import MescrollUni from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-uni.vue"
	export default {
		components: {
			MescrollUni
		},
		data() {
			return {
				title: "购买记录",
				StatusBar: this.Custom,
				CustomBar: this.CustomBar,
				mescroll: null,
				downOption: {
					use: true,
					auto: true,
				},
				upOption: {
					use: true,
					auto: false,
					page: {
						num: 0,
						size: 10
					},
					noMoreSize: 5,
					empty: {
						tip: '暂无相关数据'
					},
					textNoMore: '-- 没有更多了 --'
				},
				userInfo: [],
				tabIndex: 0,
				recordList: [],
				type: 0,
				swiperHeight: 0,
			}
		},
		onLoad(option) {
			if (option.type) {
				this.changeTab(option.type);
			}
		},
		methods: {
			jumpTo(url) {
				uni.navigateTo({
					url: url
				})
			},
			mescrollInit(mescroll) {
				this.mescroll = mescroll;
			},
			downCallback(mescroll) {
				this.refresh()
				mescroll.resetUpScroll();
			},
			upCallback(mescroll) {
				
				
				
				this.apiRequest('/buyer/SportOrderList', {
					page: mescroll.num,
					limit: mescroll.size
				}, 1,'get').then(res => {
					if (res.code != 200) {
						uni.showToast({
							icon: 'none',
							title: '请求失败'
						})
						mescroll.endSuccess()
					}
					if (mescroll.num == 1) {
						this.recordList = []
					}
					this.recordList = this.recordList.concat(res.data.data) //追加新数据
					mescroll.endByPage(this.recordList.length, res.data.total)
				})
			},
			refresh() {
				this.apiRequest('/buyer/userInfo').then(res => {
					this.userInfo = res.data
				})
			},
			changeTab(i) {
				this.tabIndex = i
				this.type = i
				this.recordList = [];
				this.mescroll.resetUpScroll()
			}
		}
	}
</script>

<style>
	.wallet-header {
		height: 160upx;
		display: flex;
		align-items: center;
		background: #FFFFFF;

	}

	.line-center {
		width: 2upx;
		height: 30%;
		background: #F7F7F7;
		opacity: 0.5;
	}

	.t-desc {
		font-size: 28upx;
		font-weight: 800;
		color: #333333;
		padding-bottom: 15upx;
	}

	.t-record {
		font-size: 36upx;
		font-weight: 800;
		color: #333333;
	}

	.t-time {
		font-size: 24upx;
		font-weight: 500;
		color: #999999;
	}

	.wallet-bg {
		width: 90%;
		margin-left: 5%;
		height: 90%;
		display: flex;
		background-color: #1270E0;
		border-radius: 20rpx;
		color: #FFFFFF;
		display: flex;
		align-items: center;
	}

	.time {
		margin-top: 15upx;
	}

	.wallet-header .money-box,
	.wallet-header .integral-box {
		width: 50%;
		text-align: center;
		padding: 3% 0;

	}

	.wallet-header .money-box .money,
	.wallet-header .integral-box .integral {
		font-size: 35rpx;
		font-weight: bold;
		line-height: 1.8;
	}

	.record-bar {
		display: flex;
		justify-content: space-around;
		width: 100%;
		background: #FFFFFF;

	}

	.record-bar .record-bar-item {
		text-align: center;
		padding: 15rpx 0;
		color: #999999;
		font-size: 30rpx;
		font-weight: bold;
	}

	.record-bar-item {
		display: flex;
		align-items: center;
	}

	.wallet-record .hov {
		height: 100upx;
		color: #333333;
		border-bottom: 4rpx solid #1270E0;
	}

	.record-list {
		width: 90%;
		margin-left: 5%;
	}

	.record-list .norecord {
		text-align: center;
		padding: 25rpx;
	}

	.record-item {
		display: flex;
		justify-content: space-between;
		font-size: 24rpx;
		background-color: #FFFFFF;
		padding: 15rpx 3%;
		width: 100%;
		border-radius: 20rpx;
		margin-bottom: 20rpx;
		height: 150upx;
		display: flex;
		align-items: center;
		flex-direction: row;
		margin-top: 15upx;
	}

	.record-item:first-of-type {
		border: none;
	}

	.record-item .record-item-left .time {
		font-size: 20rpx;
		color: #666666;
	}

	.record-item .record-item-left .des {
		font-weight: bold;
		color: #666666;
	}
</style>
